<template>
	<view class="page">
		<u-navbar :isBack="true" title="忘记密码" title-color="#101010" 
		:background="{background: '#fff'}" :borderBottom="false"></u-navbar>
		
		
		<view style="padding: 32rpx 24rpx;">
			<view style="padding: 40rpx 24rpx;background: #fff;border-radius: 24rpx;">
				<view style="display: flex;align-items: center;font-size: 28rpx;
				border-bottom: #E7E7E7 solid 1rpx;padding-bottom: 40rpx;">
					<view style="color: #333333;width: 140rpx;">手机号</view>
					<view style="flex: 1;margin-left: 40rpx;">
						<input type="text" placeholder="请填写手机号" v-model="formData.mobile" maxlength="11">
					</view>
				</view>
				<view style="border-bottom: #EFEFEF 2rpx solid;padding: 32rpx 0;display: flex;align-items: center;">
					<view style="display: flex;align-items: center;">
						<view style="color: #333333;width: 140rpx;">验证码</view>
						<view style="flex: 1;margin-left: 40rpx;">
							<input type="number" placeholder="请填写验证码" v-model="formData.recode" maxlength="11">
						</view>
					</view>
					<view style="color: #257CF6;font-size: 28rpx;" @click="sendPhoneCode">
						{{ codeBtn.text }}
					</view>
				</view>
				<view style="display: flex;align-items: center;font-size: 28rpx;
				border-bottom: #E7E7E7 solid 1rpx;padding: 40rpx 0;">
					<view style="color: #333333;width: 140rpx;">新密码</view>
					<view style="flex: 1;margin-left: 40rpx;">
						<input type="text" placeholder="请填写新的登录密码" v-model="formData.password">
					</view>
				</view>
				<view style="display: flex;align-items: center;font-size: 28rpx;
				padding: 40rpx 0 0 0;">
					<view style="color: #333333;width: 140rpx;">二次确定</view>
					<view style="flex: 1;margin-left: 40rpx;">
						<input type="text" placeholder="请再次输入登录密码" v-model="formData.erpassword">
					</view>
				</view>
			</view>
			
			<view style="color: #999999;font-size: 24rpx;margin-top: 24rpx;">请如实填写上述相关信息</view>
			
			<view style="margin-top: 32rpx;padding: 24rpx;color: #fff;
			border-radius: 16rpx;text-align: center;background: #50A5F4;" @click="onSubmin">
				确定提交
			</view>
		</view>
		
		<!-- <view style="position: fixed;bottom: 60rpx;width: 100%;">
			<image src="../../static/bottomimg.png" mode="widthFix" style="width: 100%;"></image>
		</view> -->
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
	import appurl_config from 'utils/config.js'
	import {request} from 'utils/request.js'
	import Vue from 'vue'
	var moment = require('moment');
	export default {
		data() {
			return {
				seconds: 60,
				codeBtn: {
					text: '获取验证码',
					waitingCode: false,
					count: this.seconds
				},
				disableCodeBtn: false,
				
				formData: {
					mobile: '',
					password: '',
					erpassword: '',
					recode: '',
				}
			}
		},
		onLoad() {
			// this.login();
			// // 告诉页面需要刷新登录状态
			// uni.$on('htmlRefresh', (e) => {
			// 	console.log('子页面---->>>>>>', e);
			// 	this.login();
			// })
			// if(){
				
			// }
			// uni.getStorageSync('userToken')
			uni.hideShareMenu();
		},
		onShow(){
			// if(Vue.prototype.Token){
			// 	this.$nextTick(()=>{
			// 		this.$refs.dateTable.show(this.vuex_user.department == '律师')
			// 		this.getMeetList()
			// 	})
			// }
		},
		methods: {
			sendPhoneCode: function() {
				if(this.disableCodeBtn){
					return;
				}
				// if (this.rephone == '' || !this.isphone(this.rephone)) {
				if (this.formData.mobile == '') {
					uni.showToast({
						title: '手机号码不能为空',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.codeBtn.waitingCode == false) {
					// let data = {};
					// data.phone = this.rephone;
					request.get({
						url: '/smsmessage/generateCaptcha',
						data: {
							phone: this.formData.mobile,
							event: 'changepwd',
						}
					}).then(res=>{
						console.log(res);
						if(res.code == 1){
							this.disableCodeBtn = true;
							this.codeBtn.waitingCode = true;
							this.codeBtn.count = this.seconds;
							this.codeBtn.text = this.codeBtn.count + 's';
							let countdown = setInterval(() => {
								this.codeBtn.count--;
								this.codeBtn.text = this.codeBtn.count + 's';
								if (this.codeBtn.count < 0) {
									clearInterval(countdown);
									this.codeBtn.text = '重新发送';
									this.codeBtn.waitingCode = false;
									this.disableCodeBtn = false;
								}
							}, 1000);
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
							return;
						}
					})
				}else{
					return;
				}
				// this.disableCodeBtn = true;
				// this.codeBtn.waitingCode = true;
				// this.codeBtn.count = this.seconds;
				// this.codeBtn.text = this.codeBtn.count + 's';
				// let countdown = setInterval(() => {
				// 	this.codeBtn.count--;
				// 	this.codeBtn.text = this.codeBtn.count + 's';
				// 	if (this.codeBtn.count < 0) {
				// 		clearInterval(countdown);
				// 		this.codeBtn.text = '重新发送';
				// 		this.codeBtn.waitingCode = false;
				// 		this.disableCodeBtn = false;
				// 	}
				// }, 1000);
			},
			onSubmin(){
				let params = {};
				params = this.formData;
				params.event = 'changepwd';
				request.post({
					url: '/smsmessage/updataUsersPassword',
					data: params
				}).then(res=>{
					console.log('返回用户信息：', res);
					// return;
					if(res.code == 1){
						this.$refs.uToast.show({ title: '操作成功' });
						// uni.setStorageSync('userToken', userinfo.token);
						setTimeout(() => {
							uni.navigateBack();
							// uni.$emit('htmlRefresh', {
							// 	type: 1
							// });
						}, 600);
					}else{
						this.$refs.uToast.show({ title: res.msg });
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F7F7 !important;
	}
</style>
<style lang="scss" scoped>
	.top-box{
		background-size: 100% 100%;
	}
</style>
